<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css3内容</title>
		<style>
			/* 初步设置所有的元素 */
			*{
				padding: 0px;
				margin: 10px;
			}
			[name="abc"]{
				background-color: orange;
			}
			[name^="d"]{
				background-color: hotpink;
			}
			div>p:nth-of-type(2){
				background-color: aqua;
			}
			/* 权重最高 不会被其他样式覆盖 在UI框架中修改主题色 修改默认样式 */
			:root{
				
			}
			::selection{
				color: orangered;
				background-color: black;
			}
			#d1{
				width: 200px;
				height: 100px;
				border: 1px solid crimson;
				border-radius: 20px;
			}
			#d2{
				width: 200px;
				height: 100px;
				border: 1px solid cornflowerblue;
				border-radius: 20%;
			}
			#d3{
				width: 200px;
				height: 200px;
				border: 1px solid greenyellow;
				border-radius: 50%;
			}
			#d3{
				width: 600px;
				height: 200px;
				border: 10px solid transparent;
				border-image: url(img/border.png) 30 round;
			}
			#d5{
				width: 300px;
				height: 150px;
				border: 10px solid magenta;
				background-image: url(img/bg.jpeg);
				background-position: 50% 50%;
				background-size: 100% 80%;
				background-repeat: no-repeat;
				padding: 15px;
				background-origin: content-box;
			}
			#d6{
				width: 200px;
				height: 100px;
				border: 1px solid crimson;
				border-radius: 20px;
				/* background-color: rgba(255, 0, 0, 0.5); */
				background-color: hsla(170, 100%, 50%, 0.5)
			}
			#d7{
				width: 200px;
				height: 100px;
				border: 1px solid crimson;
				border-radius: 20px;
				/* background-color: rgba(255, 0, 0, 0.5); */
				/* background-image: linear-gradient(to left top,red,green,blue); */
				background-image: linear-gradient(-45deg,red,green,blue);
			}
			#d8{
				text-shadow: 2px 2px 2px orange,5px 5px 5px red,10px 10px 10px blue;
			}
			#d9{
				width: 200px;
				height: 100px;
				background-color: orange;
				box-shadow: 5px 5px 5px 5px gray,15px 15px 15px 15px blue,25px 25px 25px 25px red;
			}
			#d10{
				margin-top: 150px;
				width: 200px;
				border:1px solid orangered;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			@font-face {
				font-family: "xin";
				src: url(font/xin.ttf);
			}
			#d11{
				font-family: "xin";
			}
		</style>
	</head>
	<body>
		<input type="text" name="abc" id="">
		<input type="text" name="d123424234234234" id="">
		<div>
			<p>123</p>
			<h1>123</h1>
			<p>456</p>
			<h2>456</h2>
		</div>
		<div id="d1">
			
		</div>
		<div id="d2">
			
		</div>
		<div id="d3">
			
		</div>
		<div id="d4">
			
		</div>
		<div id="d5">
			
		</div>
		<div id="d6">
			
		</div>
		<div id="d7">
			
		</div>
		<div id="d8">
			这里是文字阴影
		</div>
		<div id="d9">
			
		</div>
		<div id="d10">
			这里有一段比较长的文本内容呀，基本上要装不下了，变成。。。吧！
		</div>
		<h1 id="d11">这里是使用了新的字体</h1>
	</body>
</html>